import React, {useEffect, useState} from "react";
import {Button, Card, Col, Form, Input, Row, Select, Tag} from "antd";
import {Option} from "antd/es/mentions";
import http from "../../../utils/request";

const GatewayConfig = ({baseConfig}) => {
  const [form] = Form.useForm();
  const [content, setContent] = useState();
  const getCurrentConfig = () => {

    form.validateFields().then(values => {

      let requestUrl = baseConfig.url + values.option + "get?serviceId=" + values.appName;
      let bo = {
        url: requestUrl,
        code: baseConfig.code
      }

      http.post("api/extend/gateWay/getConfig", bo).then(res => {
          setContent(JSON.stringify(res.data, null, 2))
        }
      )
    })
  }
  useEffect(() => {
    setContent("");
  }, [baseConfig]);

  const updateConfig = () => {

    form.validateFields().then(values => {

      let requestUrl = baseConfig.url + values.option + "update";
      let bo = {
        url: requestUrl,
        code: baseConfig.code,
        data: content
      }

      http.post("api/extend/gateWay/updateConfig", bo).then(res => {

        }
      )
    })
  }
  return (<>
    <Card title={<Row gutter={24}>
      <Col span={12}>{baseConfig.description}</Col>
      <Col span={12}>{baseConfig.url}</Col>
      </Row>}>
      <Form
        form={form}
        className="ant-advanced-search-form"
      >
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="配置项" name="option" rules={[{required: true, message: '配置项为必填项!'}]}>
              <Select>
                <Option key={"/gateway/route/"}>网关路由</Option>
                <Option key={"/gateway/auth/"}>权限设置</Option>
                <Option key={"/gateway/gray/"}>灰度配置</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="应用Id" name="appName" labelCol={{span: 5}}
                       wrapperCol={{span: 18}} rules={[{required: true, message: '应用名称必填项!'}]}>
              <Input/>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Button onClick={() => {
              getCurrentConfig()
            }}>获取当前配置</Button>
          </Col>
          <Col span={4}>
            <Button onClick={() => {
              updateConfig()
            }}>提交修改</Button>
          </Col>
        </Row>
        <Row gutter={24}>
          <Input.TextArea value={content} rows={20} onChange={(event) => {
            setContent(event.target.value)
          }}/>
        </Row>
      </Form>
    </Card>
      </>)
    }
          export default GatewayConfig
